<template>
  <view class="page"> 
    <commonNav :currentSewLine="currentSewLine.sewingName" :navTitle="navTitle" @backRouter="backToHome" />

    <view class="content">
      <view class="searchBar">
        <view class="searchItem">
          <view class="searchLabel">{{ $t('deviceMaintenance.serialNumber') }}:</view>
          <uni-easyinput 
            class="uni-mt-5" 
            placeholderStyle="font-size:16px"
            trim="all" 
            v-model="search" 
            :placeholder="$t('deviceMaintenance.serialNumber')"
          ></uni-easyinput>
        </view>

        <view class="searchBtn" @click="querySearch">{{ $t('deviceMaintenance.search') }}</view>
        <image class="scanImg" src="../../static/img/scan.png" @click="showScan"></image>
      </view>
      <view class="cardBox">
        <!-- <Card :data="cardData" :sewingId="sewingId"></Card> -->
        <Card 
          v-for="(data, index) in list" 
          :data="data" 
          :sewingId="sewingId" 
          :key="index"
        ></Card>
      </view>
      <view class="paginationBox">
        <uni-pagination 
          title="标题文字" 
          :total="total" 
          :current="page"
          :pageSize="6"
          @change="pageChange"
          :showIcon="true"
        ></uni-pagination>
      </view>
    </view>
  </view>

</template>

<script>
import commonNav from "@/components/nav/commonNav.vue"
import storage from "@/utils/storage.js"
import Card from "./components/card.vue"
import { getList } from "@/api/deviceMaintenance.js"

export default {
  data() {
    return {
      currentSewLine: storage.get('currentSewLineInfo') || {
        sewingName: '未选择缝制线'
      },
      navTitle: this.$t('home.deviceMaintenance'),
      cardData: {
        a: '1组-11号',
        deviceSn: '10380150011',
        c: '平缝机-A8-Z',
        d: '15 / 20',
        e: '缝制2线',
        f: '2024-01-05',
        id: Math.ceil(Math.random() * 5000)
      },
      sewingId: null,
      search: '',
      style: {
        fontSize: 18
      },
      total: 0,
      page: 1,
      list: []
    }
  },
  components: {
    commonNav, Card
  },
  onLoad(option) {
    this.sewingId = option.sewingId
    // this.getData()
  },
  onShow() {
    this.getData()
  },
  methods: {
    backToHome() {
      uni.navigateTo({
        url: `/pages/index/index`
      })
    },
    longpress() {
      console.log('长按')
    },
    cardClick() {
      console.log('click');
    },
    showScan() {
      let that = this
      uni.scanCode({
        scanType: ['qrCode'],
        success: function (res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
          let code 
          if (res.result.includes('*')) {
            const arr = res.result.split('*')
            code = arr[0]
          }
          if (!res.result.includes('*')) {
            code = res.result
          }
          that.page = 1
          that.search = code
          that.getData()
        }
      });
    },
    querySearch() {
      this.page = 1
      this.getData()
    },
    pageChange({type, current}) {
      this.page = current
      console.log(type, 'type');
      console.log(current, 'current');
      this.getData()
    },
    async getData() {
      try {
        const { data, code } = await getList({
          page: this.page,
          limit: 6,
          deviceSn: this.search
        }) || {}
        if (+code === 0) {
          console.log(data, 'data');
          this.total = data.total
          // progress itemNum maintanceNum
          data.list.forEach(item => {
            item.progress = `${item.maintanceNum} / ${item.itemNum}`
          })
          this.list = data.list
        }
      } catch (error) {
        console.log(error);
      }
    }
  },
  watch: {
    // search: {
    //   handler(val) {
    //     console.log(val, '~~~~~~');
    //   },
    //   immediate: false
    // }
  }
}
</script>

<style lang="less" scoped>
	.page {
    position: relative;
		width: 100%;
		// height: 100vh;
		overflow-x: hidden;
		// box-sizing: border-box;
	}

  .content {
    padding-top: 131.332rpx;
  }

  .cardBox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    height: calc(100vh - 131.332rpx - 120px) ;
    overflow: auto;
    padding: 12px;
  }

  .searchBar {
    height: 60px;
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center;
  }
  .scanImg {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-left: 8px;
  }
  .searchItem {
    display: flex;
    align-items: center;
  }

  .searchLabel {
    padding: 0 8px;
  }
  .searchBtn {
    margin-left: 16px;
    width: 72px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1890ff;
    color: #ffffff;
    border-radius: 6px;
  }

  .paginationBox {
    padding-top: 8px;
    padding-right: 32px;
    display: flex;
    justify-content: flex-end;
  }

  .uni-mt-5 {
    width: 200px;
  }
</style>